<template>
  <div id="specialtyLibrary-top">
    <img
      class="bg1"
      v-if="type == 1"
      src="../../../../assets/specialty/bg1.jpg"
      alt=""
    />
    <img
      class="bg1"
      v-if="type == 2 || type == 9"
      src="../../../../assets/specialty/bg2.jpg"
      alt=""
    />
    <img
      class="bg1"
      v-if="type == 3"
      src="../../../../assets/specialty/bg3.jpg"
      alt=""
    />
    <img
      class="bg1"
      v-if="type == 4 || type == 8"
      src="../../../../assets/specialty/bg4.jpg"
      alt=""
    />
    <img
      class="bg1"
      v-if="type == 5"
      src="../../../../assets/specialty/bg5.jpg"
      alt=""
    />
    <img
      class="bg1"
      v-if="type == 10"
      src="../../../../assets/specialty/bg10.jpg"
      alt=""
    />
    <!-- <img class="bg1"  v-if="type==9" src="../../../../assets/specialty/bg9.png" alt=""> -->
    <div class="bgblcok clearfix" ref="bgblcok">
      <div class="fl left" v-if="type == 1" ref="left">
        <p class="title">课程库</p>
        <p class="title-el">KECHENGKU</p>
      </div>
      <div class="fl left" v-if="type == 2" ref="left">
        <p class="title">专业库</p>
        <p class="title-el">ZHUANGYEKU</p>
      </div>
      <div class="fl left" v-if="type == 3" ref="left">
        <p class="title">兵种库</p>
        <p class="title-el">BINGZHONGKU</p>
      </div>
      <div class="fl left" v-if="type == 4" ref="left">
        <p class="title">专题库</p>
        <p class="title-el">ZHUANGTIKU</p>
      </div>
      <div class="fl left" v-if="type == 5" ref="left">
        <p class="title">示范微视频</p>
        <p class="title-el">SHIFANWEISHIPIN</p>
      </div>
      <div class="fl left" v-if="type == 8" ref="left">
        <div v-if="listType == 1">
          <p class="title">{{ showModuleName('tzgg') || '通知公告' }}</p>
          <p class="title-el">{{
            showModuleEnName('tzgg') || 'TONGZHIGONGGAO'
          }}</p>
        </div>
        <div v-if="listType == 2">
          <p class="title">{{ showModuleName('zcfg') || '政策法规' }}</p>
          <p class="title-el">{{
            showModuleEnName('zcfg') || 'ZHENGCEFAGUI'
          }}</p>
        </div>
        <div v-if="listType == 3">
          <p class="title">关于我们</p>
          <p class="title-el">GUANYUWOMEN</p>
        </div>
        <div v-if="listType == 4">
          <p class="title">联系我们</p>
          <p class="title-el">LIANXIWOMEN</p>
        </div>
      </div>
      <div class="fl left" v-if="type == 9" ref="left">
        <p class="title">资源检索</p>
        <p class="title-el">ZHIYUANJIANSUO</p>
      </div>
      <div class="fl left" v-if="type == 10" ref="left">
        <p class="title">{{ showModuleName('szys') || '思政体系' }}</p>
        <p class="title-el">{{ showModuleEnName('szys') || 'SIZHENGTIXI' }}</p>
      </div>
      <div class="fl right">
        <p @click="routeToByName('index')" class="fl"
          >{{ showModuleName('sy') || '首页' }} > &nbsp;
        </p>

        <p class="fl" v-if="type == 8">
          <span v-if="listType == 1">
            {{ showModuleName('tzgg') || '通知公告' }}
          </span>
          <span v-if="listType == 2">
            {{ showModuleName('zcfg') || '政策法规' }}
          </span>
          <span v-if="listType == 3"> 关于我们 </span>
          <span v-if="listType == 4"> 联系我们 </span>
        </p>
        <p class="fl" v-if="type == 10">
          <span> {{ showModuleName('szys') || '思政体系' }} </span>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import homeConfig from '@/mixins/homeConfig'
export default {
  mixins: [homeConfig],
  data() {
    return {
      type: this.$route.query.type,
      listType: this.$route.query.listType,
    }
  },
  watch: {
    $route(to, from) {
      this.listType = this.$route.query.listType
    },
  },
  mounted() {
    if (this.type == 1) {
      this.$refs.bgblcok.style.borderBottom = '100px solid #06a2c9'
      this.$refs.left.style.borderRight = '1px solid #88b0d5'
    }
    if (this.type == 2) {
      this.$refs.bgblcok.style.borderBottom = '100px solid #0659a7'
      this.$refs.left.style.borderRight = '1px solid #88b0d5'
    }
    if (this.type == 3) {
      this.$refs.bgblcok.style.borderBottom = '100px solid #3d815a'
      this.$refs.left.style.borderRight = '1px solid #fff'
    }
    if (this.type == 4) {
      this.$refs.bgblcok.style.borderBottom = '100px solid #e67c00'
      this.$refs.left.style.borderRight = '1px solid #fff'
    }
    if (this.type == 5) {
      this.$refs.bgblcok.style.borderBottom = '100px solid #cc8690'
      this.$refs.left.style.borderRight = '1px solid #fff'
    }
    if (this.type == 8 || this.type == 9 || this.type == 10) {
      this.$refs.bgblcok.style.borderBottom = '100px solid #930b0b'
      this.$refs.left.style.borderRight = '1px solid #fff'
    }
  },
  methods: {},
}
</script>

<style  lang="scss" >
#specialtyLibrary-top {
  position: relative;
  .bg1 {
    height: 290px;
    width: 100%;
    background: 100% 100%;
    display: inherit;
  }
  .bgblcok {
    width: 510px;
    height: 100px;
    // background: url(../../../../assets/specialty/bg2.png) no-repeat;
    color: #fff;
    padding-top: 15px;
    position: absolute;
    bottom: -30px;
    left: 0;
    padding-left: 260px;
    border-bottom: 100px solid #0659a7;
    border-right: 100px solid transparent;
    .left {
      margin-top: 120px;
      .title {
        font-size: 30px;
        font-weight: 900;
      }
      border-right: 1px solid #88b0d5;
      padding-right: 20px;
    }
    .right {
      margin-top: 120px;
      padding-left: 20px;
      height: 60px;
      line-height: 60px;
      cursor: pointer;
    }
  }
}
</style>
